<script setup lang='ts'>
import { ref, reactive, toRefs } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { CaretBottom } from "@element-plus/icons-vue";

const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  name: "健身",
  appId: "wx9c1ad333227ee7c929cb",
  originId: "gh_2b2332d727eaaac",
  appKey: "wx9c1adc3723ee7c929cb",
  appMchId: "15222392251",
  payKey: "w3333dc372323322222ee7c929cb",
  refund: false,
  credentials: [
    { name: "apiclient_cert.pem证书1", state: "1", content: "" },
    { name: "apiclient_cert.pem证书2", state: "1", content: "" },
  ],
  refundTime: 5,
  refundRatio: 80,
  pointPrice: 100,
  pointRatio: 50,
});

// 表单验证规则
const rules = reactive<FormRules>({
  name: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  appId: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  originId: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  appKey: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  appMchId: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  payKey: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  refundTime: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  refundRatio: [
    { required: true, message: "输入不能为空！", trigger: "blur" },
    {},
  ],
  pointPrice: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
  pointRatio: [{ required: true, message: "输入不能为空！", trigger: "blur" }],
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 重置表单
// const resetForm = (formEl: FormInstance | undefined) => {
//   if (!formEl) return;
//   formEl.resetFields();
// };

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));

import { genFileId } from "element-plus";
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";

const upload = ref<UploadInstance>();

// 上传文件超出限制时
const handleExceed: UploadProps["onExceed"] = (files) => {
  upload.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value!.handleStart(file);
};

// 文件上传操作
const submitUpload = () => {
  upload.value!.submit();
};

// 子组件引用
import defaultDialog from "../../components/defaultDialog.vue";
const defaultLog = ref(null);

const openDia = () => {
  console.log(defaultLog.value.open());
};
</script>
<!-- 模型 -->
<template>
  <div class="settings">
    <div class="settingHeader">
      <slot name="headerLeft">系统配置</slot>
    </div>
    <div class="settingMain">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="180px"
        class="demo-ruleForm"
        :size="formSize"
        status-icon
      >
        <el-divider content-position="left"
          ><el-icon><CaretBottom /></el-icon>应用基础设置</el-divider
        >

        <el-form-item label="小程序名称：" prop="name">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="小程序应用编号：" prop="appId">
          <el-input v-model="ruleForm.appId" />
        </el-form-item>
        <el-form-item label="小程序原始id：" prop="originId">
          <el-input v-model="ruleForm.originId" />
        </el-form-item>
        <el-form-item label="小程序应用秘匙：" prop="appKey">
          <el-input v-model="ruleForm.appKey" />
          <!-- <el-col class="text-center" :span="2">
            <span class="text-gray-500">-</span>
          </el-col> -->
        </el-form-item>
        <el-form-item label="微信支付商户号：" prop="appMchId">
          <el-input v-model="ruleForm.appMchId" />
        </el-form-item>
        <el-form-item label="微信支付密钥：" prop="payKey">
          <el-input v-model="ruleForm.payKey" />
        </el-form-item>
        <el-form-item label="微信退款：" prop="refund">
          <el-radio-group v-model="ruleForm.refund">
            <el-radio :label="true">开启</el-radio>
            <el-radio :label="false">关闭</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-divider content-position="left"
          ><el-icon><CaretBottom /></el-icon>证书上传</el-divider
        >

        <el-form-item prop="credentials" label-width="0">
          <el-table :data="ruleForm.credentials" border style="width: 100%">
            <el-table-column prop="name" label="名称" />
            <el-table-column prop="state" label="状态">
              <template #default="s">
                <span>{{ s.row.state == 1 ? "已上传" : "未上传" }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template>
                <el-upload
                  ref="upload"
                  class="upload-demo"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :auto-upload="false"
                >
                  <template #trigger>
                    <el-button type="primary">选择文件</el-button>
                  </template>
                </el-upload>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-divider content-position="left"
          ><el-icon><CaretBottom /></el-icon>其他设置</el-divider
        >

        <el-form-item class="form-column" label="预约退款时长：">
          <p>
            <el-form-item class="flex-row">
              <el-input
                class="shortInput"
                type="number"
                v-model="ruleForm.refundTime"
              />
              <span class="tips">开课前可退款的时间/h</span>
            </el-form-item>
          </p>
          <p>
            <el-form-item class="flex-row">
              <el-input
                class="shortInput"
                type="number"
                v-model="ruleForm.refundRatio"
              />
              <span class="tips">退款扣除比例</span>
            </el-form-item>
          </p>
        </el-form-item>
        <el-form-item class="form-column" label="积分赠送比例：">
          <p>
            <el-form-item class="flex-row">
              <el-input
                class="shortInput"
                type="number"
                v-model="ruleForm.pointPrice"
              />
              <span class="tips">积分价值，多少积分抵扣一元</span>
            </el-form-item>
          </p>
          <p>
            <el-form-item class="flex-row">
              <el-input
                class="shortInput"
                type="number"
                v-model="ruleForm.pointRatio"
              />
              <span class="tips">充值返积分比例</span>
            </el-form-item>
          </p>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">
            保存
          </el-button>
          <el-button @click="openDia()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 子组件 -->
    <default-dialog ref="defaultLog">
      <template #header>
        <span>onRenderTracked()</span>
      </template>
      <template #time>
        <span>2023-05-05 00:00:00</span>
      </template>
      <template #content>
        <span>注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。</span>
      </template>
    </default-dialog>
  </div>
</template>

<style scoped>
.settings {
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  overflow: hidden;
}

.form-column :deep(.el-form-item__content) {
  align-items: flex-start;
  flex-direction: column;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.el-form-item__content p {
  flex: 1;
}

.settingHeader {
  height: 50px;
  line-height: 50px;
  background-color: #f3f3f3;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
}

.settingMain {
  padding: 50px 100px;
}

.tips {
  font-size: 12px;
  color: #cacaca;
}

.shortInput {
  width: 80px;
}

.txtMain {
  color: black;
}

:deep(.el-divider--horizontal) {
  margin: 50px 0;
}
</style>